<template>
  <div >
    <!-- -->
    <!--个人中心-->
    <div @touchmove.prevent class="main-header">
      <div  class="personal-center click-dh">
        <div class="person-img">
          <img src="@/assets/snake/body-4.png" alt="">
        </div>
        <div class="person-name">
          王二
        </div>
      </div>

      <!--积分-->
      <div class="accumulated-scores click-dh">
        <div class="accumulated-img">
          <img src="@/assets/snake/body-4.png" alt="">
        </div>
        <div class="accumulated-num">
          0
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="header-right-btns">
        <div
          v-for="btn in btnList"
          :key="btn.type"
          class="options-btn click-dh"
          @click="() => handleClickBtn(btn)"
        >
          <div v-if="btn.type === 'mute' && isOpenMusic" class="disabled-music"></div>
          <img src="@/assets/scss/head.png" alt="">
          <p>{{ btn.label }}</p>
        </div>
      </div>
    </div>
    <VPlayingMethodModal ref="playingMethodModal"/>
    <BackpackModal ref="BackpackModal" @gotoExchange="gotoExchange"/>
  </div>
</template>

<script>
import VPlayingMethodModal from '@/components/snake-components/playing-method-modal/playing-method-modal.vue'
import BackpackModal from '@/components/snake-components/playing-method-modal/backpack-modal.vue'
export default {
  name: 'VMainHeader',
  components: {
    VPlayingMethodModal,
    BackpackModal
  },
  data() {
    return {
      isOpenMusic: true,
      btnList: [
        {
          label: '邀好友',
          type: 'InviteFriends'
        },
        {
          label: '背包',
          type: 'Backpack'
        },
        {
          label: '玩法',
          type: 'PlayingMethod'
        },
        {
          label: '静音',
          type: 'mute'
        }
      ],
      showPlayingMethodModal: false
    };
  },

  mounted() {
    
  },

  methods: {
    handleClickBtn(btn) {
      if(btn.type === 'mute') {
        this.isOpenMusic = !this.isOpenMusic
      } else if(btn.type === 'PlayingMethod') {
        //打开弹窗
        this.$refs.playingMethodModal.openModal({
          title: '玩法介绍'
        })
      } else if(btn.type === 'Backpack') {
        //打开弹窗
        this.$refs.BackpackModal.openModal({
          title: '背包'
        })
      }
    },
    gotoExchange() {
      this.$emit('gotoExchange')
    }
  },
};
</script>
<style lang="scss">
.main-header {
  width: 100%;
  height: 3rem;
  padding: 0.3rem;
  /* background-color: antiquewhite; */
  display: flex;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
}
.personal-center {
  position: relative;
  width: 10rem;
  margin-left: 1rem;
  height: 100%;
  .person-img {
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: #ff0000;
    z-index: 4;
    img {
      width: 2rem;
      height: 2rem;
      margin: 0.2rem;
      border-radius: 50%;
    }
  }
  .person-name {
    position: absolute;
    top: 0.7rem;
    left: 1.2rem;
    height: 1.6rem;
    width: 6rem;
    text-align: center;
    background-color: #ff0000;
    border-radius: 3rem;
    line-height: 1.6rem;
    color: #fff;
  }
}

.accumulated-scores {
  position: relative;
  width: 10rem;
  margin-left: 1rem;
  height: 100%;
  .accumulated-img {
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: #ffbf00;
    z-index: 4;
    img {
      width: 2rem;
      height: 2rem;
      margin: 0.2rem;
      border-radius: 50%;
    }
  }
  .accumulated-num {
    position: absolute;
    top: 0.7rem;
    left: 1.2rem;
    height: 1.6rem;
    width: 6rem;
    text-align: center;
    background-color: #ffbf00;
    border-radius: 3rem;
    line-height: 1.6rem;
    color: #fff;
  }
}

.header-right-btns {
  margin-left: auto;
  width: 15rem;
  display: flex;
  .options-btn {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.6rem;
    border: 0.15rem solid #ffcfcf;
    margin: 0 0.3rem;
    img {
      width: 1.4rem;
      height: 1.4rem;
      margin: 0.1rem 0.6rem;
    }
    p {
      font-size: 0.6rem;
      text-align: center;
    }
  }
  .disabled-music {
    width: 3.4rem;
    height: 2px;
    position: absolute;
    background: #ffcfcf;
    transform: rotate(-45deg) translate(-1.2rem, 0.6rem);
  }
}

</style>